<template>
	<view class="main-box">
		<view class="wxtip" id="JweixinTip" v-if="isShare" @click="noShare()">
		    <image src="../../static/center/weixin-tip.png" style="width:60px;height:60px;position:fixed;top:5px;right:20px;" />
		    <view class="wxtip-txt">点击右上角<br/>选择分享好友</view>
		</view>
		<view class="wrap">
			<u-swiper :list="lunboImg" height="1000rpx"></u-swiper>
		</view>
		<view class="info-box">
			<view class="goods-name">
				<view class="gname-box">
					<view class="gname">{{goodsInfo.gName}}</view>
					<view class="jianjie">{{goodsInfo.jianjie}}</view>
				</view>
				<view class="share-box" @click="share()">
					<image src="../../static/index/sharingGoods.png" mode="" class="share-img"></image>
					<text class="jianjie">分享有奖</text>
				</view>
			</view>
			<view class="jiage">
				￥<text>{{goodsInfo.gPrice}}</text>/<text>{{goodsInfo.gdanwei}}</text> 
			</view>
			<view class="kuaidi-box">
				<view>快递：<text>{{goodsInfo.youfei}}</text></view>
				<view>累计销量：<text>{{goodsInfo.gsellnum}}</text><text>{{goodsInfo.gdanwei}}</text></view>
				<view>携联健康养生</view>
			</view>
			<view class="tab-box">
				<view :class="activeIndex==0?'active':''" @click="activeIndex=0">图文详情</view>
				<view :class="activeIndex==1?'active':''" @click="activeIndex=1">产品参数</view>
			</view>
			<view class="tuwen-box" v-show="activeIndex==0">
				<!-- <rich-text :nodes="goodsInfo.gdetail"></rich-text> -->
				<mp-html :content="goodsInfo.gdetail" />
			</view>
			<view class="canshu" v-show="activeIndex==1">
				<view class="canshu-item">
					<view>产地</view>
					<view>{{goodsInfo.gchandi}}</view>
				</view>
				<view class="canshu-item">
					<view>品牌</view>
					<view>{{goodsInfo.gpinpai}}</view>
				</view>
				<view class="canshu-item">
					<view>返还天数</view>
					<view>{{goodsInfo.day}}天</view>
				</view>
			</view>
		</view>
		<!-- 灰色图层 -->
		<view class="addcart-index" v-show="showAddCartBox || showGoumaiBox"></view>
		<!-- 加入购物车 -->
		<view class="addcart-box" v-show="showAddCartBox|| showGoumaiBox">
			<view class="close" @click="closeBox()">
				<u-icon name="close-circle" color="#ccc" size="40"></u-icon>
			</view>
			<view class="goods-info">
				<view class="">
					<image :src="switchImg(gImage)" class="goods-img" mode="widthFix"></image>
				</view>
				<view>
					<view>{{goodsInfo.gName}}</view>
					<view class="qian"><text>{{gprice}}</text>/<text>{{goodsInfo.gdanwei}}</text></view>
				</view>
			</view>
			<view class="num-box">
				<view class="tips">购买数量</view>
				<view class="btn-group">
					<view class="jian" @click="numJian()">-</view>
					<view class="num">1</view>
					<view class="jia" @click="numJia()">+</view>
				</view>
			</view>
			<view class="guigebox">
				<view class="guigegroup" v-for="(item,i) in resetGuige.select_guiges" :key="i">
					<view class="guigeName">{{item.name}}</view>
					<view class="guigeValue-box" >
						<view v-for="(im,j) in item.values">
							<view class="guigeValue" @click="setActive(i,j)" :class="selectGuige[i][j]==1?'active':''">
								<image v-if="swichGuigeIcon(i,j)!='../../../static/center/chongzhi.png'" :src="swichGuigeIcon(i,j)" class="guigeImg" mode="widthFix"></image>
								{{im.value}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="confirm-box">
				<button type="default" class="confirm-btn" @click="queDing()">确定</button>
			</view>
		</view>
		<view class="btm-fix">
			<uni-goods-nav :fill="false" :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html'
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				rawList:[],
				goodsInfo:{},		// 商品信息
				guige:{	},			// 商品规格，字符串形式
				resetGuige:{ },		// 重置规格，json格式
				selectGuige:[ ],	// 用于选择的规格，未选中设置为-1,
				gprice:"",			// 价格
				names:"",			// 选择的规格值
				params:"",			// 选择的规格值下标
				options: [{
						icon: 'headphones',
						text: '客服'
					}, {
							icon: 'heart',
							text: '收藏',
							infoBackgroundColor:'#007aff',
							infoColor:"red"
					}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}],
				activeIndex:0,			// 选项卡下标
				showAddCartBox:false,	// 是否显示加入购物车
				showGoumaiBox:false,	// 是否点击立即购买
				logined:false,			// 判断用户是否登录
				gImage:'',				// 商品图片
				isShare:false,			// 是否点击分享了
				gid:'',					// 商品ID
				uid:'',					// 推荐人ID
				kucun:10				// 商品库存
			}
		},
		//分享给好友
		onShareAppMessage() {
			return {
				title: '携联商品：'+this.goodsInfo.gName,
				imageUrl:this.switchImg(this.gImage),
				path: 'pages/quanfan/GoodsDetail?gid='+this.gid+'&uid='+uni.getStorageSync('usersId')+'&isShare=true',
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: '携联商品：'+this.goodsInfo.gName,
				path: 'pages/quanfan/GoodsDetail?gid='+this.gid+'&uid='+uni.getStorageSync('usersId')+'&isShare=true',
				imageUrl:this.switchImg(this.gImage)
			}
		},
		methods: {
			//分享
			share(){
				this.isShare = true
			},
			//不分享
			noShare(){
				this.isShare = false
			},
			// 设置规格点击事件
			setActive(i,j){
				// this.selectGuige[i][j]=1;
				for(let m=0;m<this.selectGuige[i].length;m++)
					this.selectGuige[i][m]=-1;			// 把同一组的设置为-1
				this.$set(this.selectGuige[i],[j],1)	// 设置选中，出现红色边框,只有一个规格时有效
				if(this.resetGuige.select_guiges.length==1)		// 如果只有一组规格
				{
					this.gprice = this.resetGuige.values[j].jiage;
					this.gImage = this.resetGuige.values[j].img;
					this.kucun = this.resetGuige.values[j].kucun;
					this.params =`"${j}"`;
					this.names = `{"${this.resetGuige.select_guiges[i].name}":"${this.resetGuige.select_guiges[i].values[j].value}"}`;
				}	
				else if(this.resetGuige.select_guiges.length==2)		// 如果有两组规格
				{
					let pa=[];
					for(let m=0;m<this.selectGuige.length;m++){
						for(let n=0;n<this.selectGuige[m].length;n++){
							if(this.selectGuige[m][n]==1){
								pa.push(n);
								break;
							}
						}
					}
					if(pa.length==2){
						this.gprice = this.resetGuige.values[pa[0]].children[pa[1]].jiage;
						this.gImage = this.resetGuige.values[pa[0]].img;
						this.kucun = this.resetGuige.values[pa[0]].children[pa[1]].kucun;
					}
					this.params = pa;	// 获取规格值的下标
					let gui = [];
					for(let m=0;m<pa.length;m++){
						let obj = `{"${this.resetGuige.select_guiges[m].name}":"${this.resetGuige.select_guiges[m].values[pa[m]].value}"}`;
						gui.push(obj);
					}
					this.names = gui.toString();
				}	
			},
			// 关闭规格box
			closeBox(){
				if(this.showAddCartBox)
					this.showAddCartBox=!this.showAddCartBox;
				else
					this.showGoumaiBox = !this.showGoumaiBox;
			},
			// 在规格box中点击了确定
			queDing(){
				if(this.checkGuige()){
					if(this.showAddCartBox)		// 点了加入购物车
					{
						let userid = uni.getStorageSync("usersId");
						this.$http.get('/gouwuche', {
							p: 'addCatByMini',
							userid:userid,
							gid:this.goodsInfo.gid,
							catnum:1,
							money:this.gprice,
							names:this.names,
							params:this.params
						}).then(res => {
							if(res.data=='2'){
								this.$u.toast("加入成功")	;
								this.showAddCartBox = !this.showAddCartBox;
								uni.$emit("checkCart");
							}else if(res.data=='1'){
								this.$u.toast("不能重复添加");
							}else if(res.data=='3'){
								this.$u.toast("请到详情页选择规格");
							}
						})
					}	
					else if(this.showGoumaiBox){	// 点了立即购买
						if(this.kucun <= 0){
							this.$u.toast("库存不足！");
							return;
						}
						this.showGoumaiBox= !this.showGoumaiBox;
							let reg = /{/g;
						let reg2 = /}/g;
						let names = this.names.replace(reg,'').replace(reg2,'');
						names = this.names ;
						// console.log("详情规格值："+this.names);
						// console.log("处理后规格："+encodeURI(JSON.stringify(this.names)));
						uni.navigateTo({
							url:`LjgmOrder/LjgmOrder?gprice=${this.gprice}&gname=${this.goodsInfo.gName}&gimages=${this.goodsInfo.gImages}&gid=${this.goodsInfo.gid}&gdanwei=${this.goodsInfo.gdanwei}&sid=&names=${names}&params=${this.params}`
						})
					}
						
				}else{
					this.$u.toast("请选择完整规格")	;
				}
			},
			// 检查是否选中了全部规格
			checkGuige(){
				// 如果没规格
				if(this.resetGuige.select_guiges==undefined || this.resetGuige.select_guiges==null)
					return true;
				
				let n = this.resetGuige.select_guiges.length;	// 获取全部规格个数
				let k = 0;	// 表示选择规格个数
				for(let i=0;i<this.selectGuige.length;i++){
					for(let j=0;j<this.selectGuige[i].length;j++){
						if(this.selectGuige[i][j]==1){
							k++;
							break;
						}
					}
				}
				if(k!=n){
					return false;
				}else{
					return true;
				}
			},
			onClick (e) {
				if(e.content.text == "客服"){
					uni.navigateTo({
						url:'kefu?daili='+this.goodsInfo.daili
					})
				}
				// uni.showToast({
				//   title: `点击${e.content.text}`,
				//   icon: 'none'
				// })
			},
			// 点击加购或下单
			buttonClick (e) {
				this.logined = uni.getStorageSync('logined');
				if(!this.logined){
					this.$u.toast("请先登录")
					setTimeout(() => {
						uni.navigateTo({
							url:'../center/login'
						})
					},500)
				}else{
					if(this.goodsInfo.orStatus==0){
						this.$u.toast("该商品已下架")
						return
					}else{
						if(e.index==0)	// 加入购物车
						{
							this.showAddCartBox=!this.showAddCartBox
						}else if(e.index==1){	// 立即购买
							if(this.guige!=null && this.guige.length>1){	// 如果有规格
								this.showGoumaiBox=!this.showGoumaiBox;
							}else{
								if(this.kucun <= 0){
									this.$u.toast("库存不足！");
									return;
								}
								console.log("详情规格值："+this.names);
								console.log("处理后规格："+encodeURI(JSON.stringify(this.names)));
								if(this.isNull(this.names)){
									uni.navigateTo({
										url:'LjgmOrder/LjgmOrder?gprice='+this.gprice+'&gname='+this.goodsInfo.gName+'&gimages='+this.goodsInfo.gImages+'&gid='+this.goodsInfo.gid+'&gdanwei='+this.goodsInfo.gdanwei+'&sid='+this.goodsInfo.daili+'&names='+'&params='+'&uid='+uni.getStorageSync('usersId')+'&num='+this.num+'&yunfei='+this.goodsInfo.yunfei
									})
								}else{
									uni.navigateTo({
										// url:`LjgmOrder/LjgmOrder?gprice=${this.goodsInfo.gPrice}&gname=${this.goodsInfo.gName}&gimages=${this.goodsInfo.gImages}&gid=${this.goodsInfo.gid}&gdanwei=${this.goodsInfo.gdanwei}&sid=&names=&params=`
										url:'LjgmOrder/LjgmOrder?gprice='+this.gprice+'&gname='+this.goodsInfo.gName+'&gimages='+this.goodsInfo.gImages+'&gid='+this.goodsInfo.gid+'&gdanwei='+this.goodsInfo.gdanwei+'&sid='+this.goodsInfo.daili+'&names='+encodeURI(JSON.stringify(this.names))+'&params='+encodeURI(JSON.stringify(this.params))+'&uid='+uni.getStorageSync('usersId')+'&num='+this.num+'&yunfei='+this.goodsInfo.yunfei
									})
								}
							}
						}
					}
				}
			},
			// 转换图片地址
			switchImg(image){
				return this.host+image;
			},
			swichGuigeIcon(i,j){
				if(i==0){
					return this.host + this.resetGuige.values[j].img
				}else{
					return "../../../static/center/chongzhi.png"
				}
			},
			numJia(){
				this.$u.toast("全返商品一次只能购买一件")	;
			},
			numJian(){
				this.$u.toast("不能再减了")	;
			},
			//判断是否为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		onLoad(opt) {
			this.gid = opt.gid;
			if(opt.isShare){
				this.uid = opt.uid;
			}
			this.showAddCartBox = opt.showAddCartBox;
			this.$http.get('/xieliangoods.do', {
				p: 'goodsdetail',
				id:opt.gid
			}).then(res => {
				this.rawList = res.data.list;
				this.goodsInfo= res.data.goods;
				if(this.goodsInfo!=null && this.goodsInfo!="" && this.goodsInfo!=undefined){
					this.guige = this.goodsInfo.guige;
					this.gprice = this.goodsInfo.gPrice;
					this.gImage = this.goodsInfo.gImages;
					var reg = /\"\/image/g;
					this.goodsInfo.gdetail = this.goodsInfo.gdetail.replace(reg,'"'+this.host+'/image');
				}
				// this.guige = res.data.goods.guige;
				// this.gprice = this.goodsInfo.gPrice;	// 规格box中显示的价格
				if(this.guige!=null && this.guige.length>1)
				{
					this.resetGuige = JSON.parse(this.guige);
					// 默认情况下没有选规格
					for(let  i=0;i<this.resetGuige.select_guiges.length;i++){
						let t = [	];
						for(let j=0;j<this.resetGuige.select_guiges[i].values.length;j++){
							t.push(-1);
						}
						this.selectGuige.push(t);
					}
				}	
			})
		},
		computed:{
			lunboImg(){
				let tu=[	];
				for(let i=0;i<this.rawList.length;i++){
					let obj = {	};
					obj.image=this.host+this.rawList[i].gimages;
					tu.push(obj);
				}
				return tu;
			},
		},
		components: {uniGoodsNav,mpHtml}
	}
</script>

<style scoped>
	.addcart-index{
		position: absolute;
		height: 2000rpx;
		width: 100%;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 100;
		background:#dddddd; opacity:.7; filter:alpha(opacity=70);
		padding: 20rpx;
	}
	.tuwen-box{
		margin-bottom: 50px;
	}
	.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998;}
	.wxtip-txt{margin-top: 107px; color: #fff; font-size: 20px; line-height: 1.5;}
	.main-box{
		position: relative;
	}
	.btm-fix{
		width: 100%;
		position: fixed;
		bottom: 0rpx;
	}
	.info-box{
		background-color: white;
		padding: 20rpx;
		padding-top: 50rpx;
	}
	.goods-name{
		display: flex;
	}
	.goods-name .gname{
		font-size: 30rpx;
	}
	.goods-name .jianjie{
		color: #ccc;
		font-size: 24rpx;
		margin: 10rpx 0rpx;
	}
	.goods-name .share-img{
		width: 50rpx;
		height: 50rpx;
	}
	.gname-box{
		flex: 3;
	}
	.share-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.kuaidi-box{
		display: flex;
		padding: 10rpx;
		border-bottom: 1px solid #F1f1f1;
		justify-content: space-between;
	}
	.tab-box{
		display: flex;
		padding-top: 20rpx;
	}
	.tab-box>view{
		flex: 1;
		text-align: center;
	}
	.tab-box .active{
		color: red;
	}
	.canshu-item{
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #F1f1f1;
	}
	.canshu-item>view:nth-child(1){
		flex: 1;
	}
	.canshu-item>view:nth-child(2){
		flex: 4;
	}
	/* 加入购物车 */
	.addcart-box{
		border-top: 1px solid #CCCCCC;
		position: fixed;
		bottom: 0rpx;
		height: 800rpx;
		left: 0rpx;
		width: 100%;
		background-color: #Fefefe;
		z-index: 200;
		padding: 20rpx;
	}
	.addcart-box .confirm-box{
		position: absolute;
		width: 100%;
		bottom: 0rpx;
		left: 0rpx;
	}
	.addcart-box .close{
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}
	.addcart-box .goods-info{
		display: flex;
		justify-content: flex-start;
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
		height: 200rpx;
	}
	.addcart-box .goods-info>view{
		margin-right: 20rpx;
	}
	.addcart-box .goods-img{
		width: 100rpx;
		height: 100rpx;
	}
	.num-box{
		display: flex;
		justify-content: space-between;
	}
	.btn-group .num{
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	.btn-group{
		display: flex;
		border: 1px solid #ccc;
		justify-content: space-around;
	}
	.btn-group .jian,.btn-group .num,.btn-group .jia{
		padding: 10rpx 20rpx;
		flex: 1;
		text-align: center;
	}
	.btn-group .jian,.btn-group .jia{
		background-color: #F1F1F1;
	}
	.qian::before{
		content: '￥';
		color: #F29100;
	}
	.qian{
		color: #F29100;
	}
	.tips{
		color: #ccc;
	}
	.confirm-btn{
		background-color: #FF4400;
		color: white;
	}
	/* 规格 */
	.guigeValue-box{
		display: flex;
		margin-top: 10rpx;
	}
	.guigegroup{
		margin-top: 10rpx;
	}
	.guigebox .guigeImg{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
	.guigeValue-box .guigeValue{
		padding: 10rpx;
		margin-right: 20rpx;
		background-color: #DCDFE6;
		border-radius: 10rpx;
		line-height: 40rpx;
		font-size: 18rpx;
	}
	.guigeValue-box .active{
		border: 1rpx solid red;
	}
</style>
